<template>
	<view>
		<view class="" style="font-weight: 600;font-size: 40rpx;margin: 80rpx 30rpx;margin-top: 120rpx;">
			欢迎登录哇巴扎商家端
		</view>
		<view class="box">
			<view class="tabs" style="background-color: #fcfcfc;">
				<view :class="type==1?'active':'tab1' ">
					重置密码
					<view class="bor" v-if="type==1">

					</view>
				</view>

			</view>
			<view class="" v-if="type==1">


				<view class="input">
					<u--input placeholder="请输入手机号" border="none" v-model="reg_form.mobile"></u--input>
				</view>
				<view class="input">
					<u--input placeholder="请输入新密码" border="none" v-model="reg_form.newpassword"></u--input>
				</view>
				<view class="input">
					<u-input placeholder="请输入验证码" border="none"
						style="width: 600rpx;margin-top: 26rpx;background-color: #F5F8FF;padding: 20rpx;"
						v-model="reg_form.captcha">
						<template slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="30" changeText="Xs" startText="获取验证码"
								endText="重新发送验证码"></u-code>
							<text @tap="getCode" style="color: #5d8eff;">{{tips}}</text>
						</template>
					</u-input>
				</view>
				<view class="" style="height: 30rpx;background-color: white;">

				</view>

			</view>
			<view class="" v-if="type==2">
				<view class="input">
					<u--input placeholder="请输入邮箱/手机/用户名" border="none" v-model="login_form.account"></u--input>
				</view>
				<view class="input">
					<u--input placeholder="请输入密码" border="none" mode="password"
						v-model="login_form.password"></u--input>
				</view>

			</view>
		</view>
		<view class="btn" v-if="type==1" @click="login">
			确认
		</view>
		<view class="btn" v-if="type==2" @click="login">
			登录
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				type: 1,
				tips: '',
				login_form: {
					account: "",
					password: ""
				},
				reg_form: {
					mobile: "",
					newpassword: "",
					captcha: ""
				},
			}
		},
		onLoad() {
			wx.hideHomeButton();
		},
		methods: {
			back() {
				uni.reLaunch({
					url: "/pagesA/login/login"
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			choose(val) {

			},
			async regin() {

			},
			async login() {
				if (!this.reg_form.mobile) {
					uni.showToast({
						icon: "none",
						title: "请输入手机号"
					})
					return
				}
				if (!this.reg_form.password) {
					uni.showToast({
						icon: "none",
						title: "请输新入密码"
					})
					return
				}
				if (!this.reg_form.captcha) {
					uni.showToast({
						icon: "none",
						title: "请输入验证码"
					})
					return
				}
				await uni.request({
					url: '/user/resetpwd',
					method: "POST",
					data: this.reg_form,
					header: {
						isAdmin: true
					},
					success: res => {
						console.log(res)
						if (res.res.code == 1) {
							uni.showToast({
								icon: "none",
								title: res.res.msg
							})
							uni.navigateBack()
						}
					}
				});

			},
			async getCode() {
				if (!this.reg_form.mobile) {
					uni.$u.toast('请先输入手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 	// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})

					await uni.request({
						url: '/sms/send',
						method: "POST",
						data: {
							event: "resetpwd",
							mobile: this.reg_form.mobile,
						},
						header: {
							isAdmin: true
						},
						success: res => {
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						}
					});
					// let res = await smsSend({
					// 	"mobile": this.reg_info.mobile,
					// 	"event": "register"
					// })
					// uni.hideLoading()
					// if (res.code == 0) {
					// 	uni.$u.toast(res.msg);
					// 	return
					// }

				} else {
					// uni.$u.toast('倒计时结束后再发送');
				}
			}
		}
	}
</script>
<style>
	page {
		height: 100%;
		background: linear-gradient(to bottom, #f8f8f8, #f8f8f8);
	}
</style>
<style scoped lang="scss">
	.box {
		margin: 30rpx 0;
		background-color: white;
		border-radius: 30rpx 30rpx 0 0;
	}

	.tabs {
		display: flex;

		.tab {
			font-weight: 600;
			font-size: 32rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			flex: 1;
			align-items: center;
			padding: 30rpx 0;
			background-color: #f5f5f5;
			color: #cacaca;
			font-weight: 400;
			font-size: 28rpx;
			border-radius: 0 0 0 30rpx;
			justify-content: center;

			.bor {
				width: 50rpx;
				height: 8rpx;
				background-color: #ffce52;
				margin-top: 10rpx;
				border-radius: 100px;
				display: none;
			}
		}

		.tab1 {
			font-weight: 600;
			font-size: 32rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			flex: 1;
			align-items: center;
			padding: 30rpx 0;
			background-color: #f5f5f5;
			color: #cacaca;
			font-weight: 400;
			font-size: 28rpx;
			border-radius: 0 0 30rpx 0;
			justify-content: center;

			.bor {
				width: 50rpx;
				height: 8rpx;
				background-color: #ffce52;
				margin-top: 10rpx;
				border-radius: 100px;
				display: none;
			}
		}

		.active {
			font-weight: 600;
			font-size: 34rpx;
			text-align: center;
			display: flex;
			flex-direction: column;
			flex: 1;
			align-items: center;
			padding: 30rpx 0;
			border-radius: 0 30rpx 0 0;

			.bor {
				width: 50rpx;
				height: 8rpx;
				background-color: #ffce52;
				margin-top: 10rpx;
				border-radius: 100px;
			}
		}

	}

	.input {
		margin: 30rpx 50rpx;
		padding: 20rpx 0;
		border-bottom: 1rpx solid #f8f8f8;
	}

	.btn {
		background-color: black;
		color: white;
		text-align: center;
		padding: 26rpx 0;
		border-radius: 100px;
		margin: 30rpx;
		margin-top: 50rpx;
	}
</style>